<?$this->load->view("/inc/header_inc")?>
<?$this->load->view("/inc/nav_inc")?>
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/home">首页</a> </li>
                <li><a href="/admin/user">监测区域管理</a></li>
                <li class="active">添加监测区域</li>
            </ul>
        </div>
        <div class="main-content">
            <div class="row">
                <div class="col-md-6">
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane active in" id="home">
                            <p class="text-info">说明：带*的为必填项。</p>
                            <form id="placeaddform" class="form-horizontal" method="post" action="/admin/user/saveOrUpdatePlace">
                                <?
                                if(isset($place) && isset($point)){
                                    $addflag=false;
                                ?>
                                <input type="hidden" name="id" id="id" value="<?=$place['id']?>" >
                                <?}else{
                                    $place=array(
                                        "province"=>"",
                                        "name"=>"",
                                        );
                                    $point=array(0 =>  array(
                                        "id" => "",
                                        "pid" => "",
                                        "phone" => "",
                                        "name" => "",
                                    ));
                                    $addflag=true;
                                }
                                ?>
                                
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">省份</label>
                                    <div class="col-sm-8">
                                        <input type="text"  id="province" name="province" value="<?=$place['province']?>" class="form-control" >
                                    </div>
                                    <div class="col-sm-2 "><p class="text-warning">(*)</p></div>
                                </div>


                                <div class="form-group">
                                    <label class="col-sm-2 control-label">监测区域名称</label>
                                    <div class="col-sm-8">
                                        <input type="text"  id="name" name="name" value="<?=$place['name']?>" class="form-control" >
                                    </div>
                                    <div class="col-sm-2"><p class="text-warning">(*)</p></div>
                                </div>

                                <div class="form-group">
                                   <div class="btn-toolbar list-toolbar">
                                      <input type="submit" id="useraddbtn" class="btn btn-success pull-right" value="保存"></input>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">所辖监测点</label>
                                    <div class="col-sm-8">
                                        <table id="points" class="table table-bordered table-condensed">
                                            <tr>
                                                <th>监测点ID</th>
                                                <th>监测点名字</th>
                                                <th>手机</th>
                                                <?if($host['type']==USER_TYPE_ADMIN){?>
                                                <th>操作</th>
                                                <?}?>
                                            </tr>
                                             <?
                                            foreach($point as $p) {
                                                ?>
                                                <tr>
                                                    <td><?=$p['id']?></td>
                                                    <td><a href="#" class="name"><?=$p['name']?></a></td>
                                                    <td><a href="#" class="phone"><?=$p['phone']?></a></td>
                                                <?if($host['type']==USER_TYPE_ADMIN){?>
                                                    <td>
                                                        <a data-id="<?=$p['id']?>" data-pid="<?=$p['pid']?>" title="保存" id="savePointBtn"><i class="fa fa-floppy-o"></i></a>
                                                        <a href="javascript:;"  data-id="<?=$p['id']?>" title="删除监测点" data-name="<?=$p['name']?>" class="point-delete-btn" role="button"><i class="fa fa-trash-o"></i></a>
                                                    </td>
                                                <?}?>
                                            <?
                                            }
                                            ?>    
                                         </table>
                                    </div>
                                </div>
                                 <div class="form-group">
                                   <div class="btn-toolbar list-toolbar">
                                      <input type="button" id="pointaddbtn" class="btn btn-success pull-right" value="增加监测点"></input>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="modal small fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">成功</h3>
                    </div>
                    <div class="modal-body">
                        <p class="error-text"><i class="fa fa-success modal-icon" ></i><span id="modal-success-content"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" id="continue-btn">继续操作</button>
                        <button class="btn btn-danger" data-dismiss="modal" id="finish-btn">结束操作</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal small fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="errorModalLabel">错误</h3>
                    </div>
                    <div class="modal-body">
                        <p class="error-text"><i class="fa fa-warning modal-icon" ></i><span id="modal-error-content"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">继续操作</button>
                        <button class="btn btn-danger" data-dismiss="modal">结束操作</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal small fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="deleteModalLabel">删除监测点</h3>
                    </div>
                    <div class="modal-body">
                        <p class="error-text"><i class="fa fa-warning modal-icon" ></i><span id="modal-delete-content"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal"  aria-hidden="true">取消删除</button>
                        <button class="btn btn-danger" data-dismiss="modal" id="delete-point" id="delete-user" data-id="" >确定删除</button>
                    </div>
                </div>
            </div>
        </div>
     <script src="/static/javascripts/jquery-1.11.3.min.js" type="text/javascript"></script>
     <script src="/static/javascripts/bootstrap.min.js"></script>
     <script src="/static/javascripts/bootstrap-editable.min.js"></script>
     <script src="/static/javascripts/jquery.validate.min.js"></script>
     <script type="text/javascript">
        $(function(){
            $init();
            $("form").validate({
                rules: {
                   name: "required",
                   phone: "required",
                   pid: "required",
                },
                messages: {
                    name: "请输入监测点名字",
                    phone: "请输入监测人手机号",
                    pid: "请输入监测点ID"
                },
                submitHandler:function (form) {
                    $.ajax({
                        type: $(form).attr('method'),
                        url: $(form).attr('action'),
                        data: $(form).serialize(),
                        dataType : 'json'
                    }).done(function (data) {
                        $("#login-info").removeClass("success");
                        $("#login-info").removeClass("error");

                         if (typeof $("#id").val() !== 'undefined') {
                            $('#id').val(data.id);
                        }
                        else {
                            $('#placeaddform').prepend(' <input type="hidden" name="id" id="id" value="'+data.id+'" >');
                        }

                        if (data.code == 1) {
                                showSuccess(data.msg); 
                            } else {
                                showError(data.msg);
                            }
                        });
                      return false; // required to block normal submit since you used ajax
                 }
            });
            
            function showSuccess(content)
            {
                $('#successModal').modal('toggle');
                $('#successModal').modal('show');
                $("#modal-success-content").text(content);
            }

            function showError(content)
            {
                $('#errorModal').modal('toggle');
                $('#errorModal').modal('show');
                $("#modal-error-content").text(content);
            }
             function showDelete(id,content){
                // $('#deleteModal').modal('toggle');
                $('#deleteModal').modal('show');
                $("#modal-delete-content").text(content);
                $("#delete-point").attr("data-id",id);
            }

            $("#finish-btn").click(function(){
                window.location.href="/admin/user/places";
            });

            $("#points").on('click', '.point-delete-btn', function(){
                var id=$(this).data("id");
                if (!id) {
                    $(this).closest('tr').remove();
                    return;
                }
                var pointname=$(this).data("name");
                showDelete(id,"确认删除"+pointname+"吗?");
            });

             $("#points").on('click', '#savePointBtn', function(){
                var id = $(this).data('id');
                var url = '/admin/user/saveOrUpdatePoint';
                var pid = $(this).data('pid');
                if (!pid) {
                    pid = $('#id').val();
                }

                if (typeof pid == 'undefined') {
                    showError('请先保存监测区域！');
                    return;
                }

                var name = $(this).parent().siblings().eq(1).find('a').html();
                var phone = $(this).parent().siblings().eq(2).find('a').html();
                var data = {
                    pid: pid,
                    id: id,
                    name: name,
                    phone: phone,
                }

                $.ajax({
                    method: 'post',
                    url: url,
                    data: data,
                    dataType: 'json',
                }).done(function(data) {
                    if (data.code == 1) {
                        showSuccess(data.msg); 
                    } else {
                        showError(data.msg);
                    }
                });
            });

            $("#delete-point").click(function(){
                var pid=$("#delete-point").data("id");

                $.post("/admin/user/deletePoint",
                    {id:pid},
                    function(data)
                    {
                        if(data.code==1)
                        {
                            window.location.reload();
                        }else {
                            alert(data.msg);
                        }
                    },"json");
            });
             $("#pointaddbtn").click(function(){
                var lastIndex = parseInt($('#points tr').eq(-1).find('td').html())+1;
                var pid = $('#id').val();
                var td = '<tr>'+
                    '<td>'+lastIndex+'</td>'+
                    '<td><a href="#" class="name"></a></td>'+
                    '<td><a href="#" class="phone"></a></td>'+
                    '<td>'+
                    '<a href="#" title="保存" id="savePointBtn" data-pid="'+pid+'"><i class="fa fa-floppy-o"></i></a>'+
                    '<a href="javascript:;" style="margin-left:3px;" title="删除监测点"  class="point-delete-btn" role="button"><i class="fa fa-trash-o"></i></a>'+
                    '</td>'+
                    '</tr>'
                $('#points').append(td);
                $init();
            });
            function $init() {
                $('#points .name').editable({
                    type: 'text',
                    name: 'name',
                    onblur: 'submit',
                    title: '输入监测点名称'
                });
                $('#points .phone').editable({
                    type: 'tel',
                    name: 'tel',
                    onblur: 'submit',
                    title: '请输入监测点手机号码'
                });
            }
        });
    </script>
</body>
</html>
